<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>基本组件</title>
    <script type="text/javascript" src="../../js/vue.js"></script>
</head>
<body>
    <!-- 
    Vue中使用组件的三大步骤:
        定义组件(创建组件)
        注册组件
        使用组件(写组件标签)

    如何定义一个组件?
        使用Vue.extend(options)创建，其中options和new Vue(options)时传入的那个options几乎一样，但也有点区别:
    区别如下:
        1.e1不要写，为什么?- 最终所有的组件都要经过一个vm的管理，由vm中的el决定服务哪个容器。
        2.data必须写成函数，为什么?-避免组件被复用时，数据存在引用关系。
    备注:使用template可以配置组件结构。

    如何注册组件?
        1.局部注册:靠new Vue的时候传入components选项
        2.全局注册:靠Vue.component('组件名'组件)
    三、编写组件标签:
        <school></school>


        几个注意点:
        1.关于组件名:
            一个单词组成:
            第一种写法(首字母小写):schoo1
            第二种写法(首字母大写):school多个单词组成:
            第一种写法(kebab-case命名):my-school
            第二种写法(CamelCase命名):MySchool(需要Vue脚手架支持)
        备注:
            (1).组件名尽可能回避HTML中已有的元素名称，例如:h2、H2都不行。
            (2).可以使用name配置项指定组件在开发者工具中呈现的名字。
        2.关于组件标签:
            第一种写法:<school></school>第二种写法:<school/>备注:不用使用脚手架时，<schoo1/>会导致后续组件不能染
        3.一个简写方式:
            const school =Vue.extend(options)可简写为:const school = options
    -->

    <div id="app">
        <h2>{{Name}}</h2>
        <hr>
        <!-- 第三部使用组件标签 -->
        <student></student>
        <hr>
        <school></school>
        <hr>
        <hello></hello>
    </div>
</body>
<script>
    //全局注册 组件
    

    //第一步定义组件
    const student = Vue.extend({
        template:`
        <div>
            <h3>学生名称:{{name}}</h3>
            <h3>学生年龄:{{age}}</h3>
        </div>
        `,
        //组件的data不能配置对象，考虑到复用的关系，多个组件引用同一个对象会造成显示同步，所以只能配置函数返回对象
        data(){
            return {
                name:'徐方君',
                age:29
            }
        }
    })

    const school = Vue.extend({
        template:`
        <div>
            <h3>学校名称:{{name}}</h3>
            <h3>学校年龄:{{age}}</h3>
        </div>
        `,
        data(){
            return {
                name:'二圣小学',
                age:200
            }
        }
    })

    const hello = Vue.extend({
        template:`
        <div>
            <h3>{{msg}}</h3>
        </div>
        `,
        data(){
            return {
                msg:'你好,baby',
            }
        }
    })
    //注意顺序，一定要先定义组件再注册组件
    Vue.component('hello',hello)

    //第二部 注册组件
    var vm = new Vue({
       el:'#app',
       data:{
           Name:'张三',
       },
       components:{
            //注意这里是局部注册
            student:student,
            school:school
       }
    })





</script>
</html>